<template>
    <div class="weekSwitch-main">
        <div class="weekSwitch-title">
            {{ title }}
        </div>
        <div class="weekSwitch-action">
            <div class="weekSwitch-back" v-if="nextWeekBtnStatus" @click="backNowWeek">回到本周</div>
            <div class="weekSwitch-left" @click="weekPre">
                <img class="weekSwitch-icon" src="../assets/img/weekSwitch-left.png"></img>
            </div>
            <div class="weekSwitch-right" @click="weekNext">
                <img v-if="nextWeekBtnStatus" class="weekSwitch-icon " src="../assets/img/weekSwitch-right.png"></img>
                <img v-else class="weekSwitch-icon" src="../assets/img/weekSwitch-rightDisabled.png"></img>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'WeekSwitch',
    data () {
        return {
            nextWeekBtnStatus: true,
            weekList: [],
            timeInterval: {},
            title: '5月2日~8日'
        }
    },
    created () {
        this.initWeek()
    },
    methods: {
        backNowWeek () {
            this.initWeek()
        },
        weekPre () {
            const firstDate = new Date(this.timeInterval.startTime)
            const weekStartDate = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() - firstDate.getDay() - 6)
            this.initWeek(weekStartDate)
        },
        weekNext () {
            if (this.nextWeekBtnStatus) {
                const firstDate = new Date(this.timeInterval.endTime)
                const weekStartDate = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() - firstDate.getDay() + 6)
                this.initWeek(weekStartDate)
            }
        },
        initWeek (e) {
            this.weekList = this.getWeekDataList(e)
            this.weekTitle()
            this.timeInterval = this.getWeekTimeInterval()
            this.setNextWeekBtnStatus()
            this.$emit('getWeek', this.timeInterval)
        },
        // 获取指定日期的周的列表
        getWeekDataList (e) {
            // 根据日期获取本周周一~周日的年-月-日
            const weekList = []
            let dataDate
            if (e) {
                dataDate = new Date(e)
            } else {
                dataDate = new Date()
            }
            // 判断本日期是否为周日，获取本周一日期
            if (dataDate.getDay() === 0) {
                dataDate.setDate(dataDate.getDate() - 6)
            } else {
                dataDate.setDate(dataDate.getDate() - dataDate.getDay() + 1)
            }
            let myDate = dataDate.getDate().toString().padStart(2, '0')
            let myMonth = (dataDate.getMonth() + 1).toString().padStart(2, '0')
            weekList.push(`${dataDate.getFullYear()}-${myMonth}-${myDate}`)
            // 获取周二以后日期
            for (let i = 0; i < 6; i++) {
                dataDate.setDate(dataDate.getDate() + 1)
                myDate = dataDate.getDate().toString().padStart(2, '0')
                myMonth = (dataDate.getMonth() + 1).toString().padStart(2, '0')
                weekList.push(`${dataDate.getFullYear()}-${myMonth}-${myDate}`)
            }
            return weekList
        },
        weekTitle () {
            const weekFirst = this.weekList[0].split('-')
            const weekLast = this.weekList[6].split('-')
            if (weekLast[1] === weekFirst[1]) {
                this.title = `${weekFirst[1]}月${weekFirst[2]}日~${weekLast[2]}日`
            } else {
                this.title = `${weekFirst[1]}月${weekFirst[2]}日~${weekLast[1]}月${weekLast[2]}日`
            }
        },
        getWeekTimeInterval () {
            return {
                startTime: this.weekList[0],
                endTime: this.weekList[6]
            }
        },
        setNextWeekBtnStatus () {
            const nowDate = Date.parse(new Date())
            const endTimeDate = Date.parse(new Date(`${this.timeInterval.endTime} 23:59:59`.replace(/-/g, '/')))

            if (nowDate > endTimeDate) {
                this.nextWeekBtnStatus = true
            } else {
                this.nextWeekBtnStatus = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "../assets/css/monthSwitch.scss";
</style>
